<script setup lang="ts">
// import {pcaTextArr} from 'element-china-area-data'
import crumbs from '@/components/crumbs.vue'
import {onMounted, reactive, ref} from 'vue'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import mapjson from '../../../../public/mapjson/map.json'
import {
    getPayServeCompanyDetailInfoApi,
    editPayServeCompanyDetailInfoApi,
    addPayServeCompanyDetailInfoApi
} from "@/api/tools/enterpriseInformationManagement";
import type {PartnerDto} from "@/api/tools/partner/type";
import {ElMessage, FormInstance} from "element-plus";

// const props1 = {
//     checkStrictly: true,
// }
const isAdd = ref(false)
const filterData = ref({
    noEmit: true,
    list: {
        name: {
            label: '客户名称',
            prop: 'name',
            value: '',
            placeholder: '请输入公司全称',
            type: 'input',
            inputType: 'text'
        },
    }
})
const tableHeader = ref([
    {
        label: '企业名',
        prop: 'name',
    },
    {
        label: '统一社会信用代码',
        prop: 'creditCode',
    },
    {
        label: '市',
        prop: 'city',
    },
    {
        label: '区',
        prop: 'district',
    },
    {
        label: '注册地址',
        prop: 'regLocation',
    },
    {
        label: '操作',
        prop: 'operate',
    }
])
const isUp = ref(false)
const editForm = ref({
    id: '',
    name: '',
    creditCode: '',
})
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const ruleForm = reactive<any>({
    area: [],
    name: '',
    creditCode: '',
    regLocation:'',
})
const rules = reactive<any>({
    area: [
        {required: true, message: '请选择地址', trigger: 'select'},
    ],
    name: [
        {required: true, message: '请输入企业名', trigger: 'blur'},
    ],
    creditCode: [
        {required: true, message: '请输入统一社会信用代码', trigger: 'blur'},
    ],
    regLocation: [
        {required: true, message: '请输入注册地址', trigger: 'blur'},
    ],
})
const ruleFormRef = ref<FormInstance>()
const selectedOptions = ref([])
const tableData = ref<PartnerDto[]>([] as PartnerDto[])
const handleSearch = async () => {
    let res = await getPayServeCompanyDetailInfoApi({
        name: filterData.value.list.name.value,
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize
    })
    console.log(res, 'gdsuhbgyhufsd')
    tableData.value = res.rows as any
    pageInfo.value.total = res.total
    if (res.rows.length > 0) {
        isAdd.value = false
    } else {
        isAdd.value = true
    }
}
const handlePageChange = () => {
    handleSearch()
}
const onEdit = (row: any) => {
    console.log(row)
    editForm.value.id = row.id
    editForm.value.name = row.name
    editForm.value.creditCode = row.creditCode
    ruleForm.regLocation = row.regLocation
    isUp.value = true
}
const onAdd = () => {
    isAdd.value = true
    isUp.value = true
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (isAdd.value) {
                addPayServeCompanyDetailInfoApi({
                    name: ruleForm.name,
                    regLocation: ruleForm.regLocation,
                    creditCode: ruleForm.creditCode,
                    city: ruleForm.area[1] === '市辖区' ? ruleForm.area[0] : ruleForm.area[1],
                    district: ruleForm.area[2]
                }).then(res => {
                    ElMessage.success('新增成功')
                    isAdd.value = false
                    resetForm(ruleFormRef.value)
                    handleSearch()
                }).catch(err => {
                    resetForm(ruleFormRef.value)
                    ElMessage.error('新增失败')
                })
            } else {
                editPayServeCompanyDetailInfoApi({
                    ...editForm.value,
                    regLocation: ruleForm.regLocation,
                    city: ruleForm.area[1] === '市辖区' ? ruleForm.area[0] : ruleForm.area[1],
                    district: ruleForm.area[2]
                }).then(res => {
                    ElMessage.success('编辑成功')
                    resetForm(ruleFormRef.value)
                    handleSearch()
                }).catch(err => {
                    resetForm(ruleFormRef.value)
                    ElMessage.error('编辑失败')
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    isUp.value = false
}
const back = () => {
    window.history.back()
}
</script>

<template>
    <div>
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../../assets/image/back.png" alt=""/>
            </div>
            <crumbs basetitle="工具" title="企业信息管理"></crumbs>
        </div>
        <div class="w-fill box-border p-16px">
            <el-card class="mb-16px">
                <filterComponent v-model:filter-data="filterData" :showAdd="isAdd" @add="onAdd"
                                 @doSearch="handleSearch"/>
            </el-card>
            <el-card class="mb-16px">
                <tableComponent class="set-height" theme="light" :table-header="tableHeader"
                                :table-data="tableData" v-model:page-info="pageInfo"
                                @pageChange="handlePageChange">
                    <template #operate>
                        <el-table-column width="100" label="操作" fixed="right">
                            <template #default="scope">
                                <el-button link type="primary" class="text-#0256ff" @click="onEdit(scope.row)">编辑
                                </el-button>
                            </template>
                        </el-table-column>
                    </template>
                </tableComponent>
            </el-card>
        </div>
        <el-dialog v-model="isUp" :title="isAdd?'新增':'编辑'" width="700">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm"
                     status-icon>
                <el-form-item v-if="isAdd" label="企业名" prop="name">
                    <el-input v-model="ruleForm.name"/>
                </el-form-item>
                <el-form-item v-if="isAdd" label="统一社会信用代码" prop="creditCode">
                    <el-input v-model="ruleForm.creditCode"/>
                </el-form-item>
                <el-form-item label="地区选择" prop="area">
                    <el-cascader
                        class="!w-full"
                        placeholder="请选择地区"
                        size="default"
                        :options="mapjson"
                        v-model="ruleForm.area"
                    >
                    </el-cascader>
                </el-form-item>
                <el-form-item label="注册地址" prop="regLocation">
                    <el-input v-model="ruleForm.regLocation"/>
                </el-form-item>
            </el-form>
            <div class="flexendbox">
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确定
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">
.set-height {
    height: calc(100vh - 340px);
}
</style>
